<template>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="widget">
                        <h2 class="widget-header">购物车(Bootstrap)</h2>
                        <div class="ct-cart">
                            <span class="ct-cart-total">{{currency(total)}}</span>
                            <ol>
                                <selected-item v-for="item in productsInCart" :product="item.product" :count="item.count" :key="item.product.id"/>
                            </ol>
                            <button class="ct-cart-clear" @click="clearCart">Clear Cart</button>
                            <button type="submit" class="ct-cart-checkout">Checkout</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-sm-4" v-for="product in allProducts">
                            <item :product = 'product'/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</template>

<script>
    import '@cart/css/bootstrap.min.css'
    import '@cart/css/style.css'
  import selectedItem from './selectedItem.vue'
  import item from './item.vue'
  import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
  import format from '@cart/js/currency.js'
export default {
      components: {
          'selected-item': selectedItem,
          'item': item
      },
      data:function () {
          return {
          }
      },
   computed: {
       ...mapGetters({
           productsInCart: 'productsInCart',
           allProducts: 'allProducts',
           total: 'total'
       })
   },

  methods: {
      currency: format,
      ...mapActions(['clearCart'])
  }
}
</script>

<style>
    main{
        padding-top: 20px;
    }
</style>
